import React, { Component } from 'react';
import { Menu, ActivityIndicator, NavBar,Tabs, WhiteSpace ,Toast } from 'antd-mobile';
import {Spin} from 'antd'
import { getallcat, getinitcontent} from '../../network/pamphlet'
import {request} from '../../network/request'
import axios from 'axios'
import "./pamphlet.css"
import {getChinesenum} from './util'
import {connect} from 'react-redux'
import {check_identity} from '../../tool'

import { Divider } from 'antd';

const cat_data = [
    {
      value: 'yuqing',
      label: '舆情风险',
      children: []   
    },
    {
      value: 'jinji',
      label: '禁忌话语',
      children: []
    },
   
  ];



class Pamphlet extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
          initData: '',
          show: false,
          yuqing: [],
          jinji: [],
          isloading:true,
          res_intro:[],
          res_yucontent:[],
          current_type:'',
          settab:false,

        };
      }

    componentDidMount(){
      
      

      //获取初始目录
      const get_init_cat = async()=>{
        const cat_res = await getallcat()
        var res_jinji,res_yuqing 
        
        [res_jinji,res_yuqing ] = cat_res
        if(res_jinji.code === 200){
          this.setState({
            yuqing : res_yuqing.data,
            jinji : res_jinji.data
          })
        }
        else {
          console.log(res_jinji.code);
          Toast.info('请先登录',2,()=>{  
            this.props.history.push({pathname:'/main/login'})
        })
        }
        
      
      }

      //获取初始内容
      const get_init_content = async()=>{
        const init_content = await getinitcontent()
        var res_intro,res_yucontent
        [res_intro,res_yucontent ] = init_content
        if (res_intro.code === 200)
        {
          this.setState({
            res_intro:res_intro.data,
            res_yucontent:res_yucontent.data,
            show:false,
            current:1,
            current_name:'红色宣传工具类',
            isloading:false
          })   
        }
        else {
          console.log(res_intro.code);
          Toast.info('请先登录',2,()=>{  
            this.props.history.push({pathname:'/main/login'})
        })
        }
          
      }

      if(check_identity(this.props.identity))
      {
        get_init_cat()
        get_init_content()
      }
      else {
        Toast.info('权限不足，请升级至内部成员',2,()=>{  
          this.props.history.push({pathname:'/main/profile'})
      })
      }

     

    }


    

    onChange = (value) => {
        this.setState({current_type:value[0]})
        switch (value[0]) {
          case 'jinji':
            request({
              url:'koujing/jinji/subcatalog'
            }).then(res=>
              {
                const jinji_sub = res.data
                this.setState({
                
                  show:false,
                  current_sub:value[1],
                })
             
                if(!this.state.settab){
                  const jinji_tab1 = []
                  const jinji_tab2 = []
                  for (var i in jinji_sub){
                    if (i<5)
                    {
                      const tabitem = {
                        title : `风险点${parseInt(i)+1}`,
                        content :jinji_sub[i].name,
                        type:jinji_sub[i].type
                       }
                      jinji_tab1.push(tabitem)
                    }
                    else {
                      const tabitem = {
                        title : jinji_sub[i].name,
                        type:jinji_sub[i].type
                       }
                      jinji_tab2.push(tabitem)
                    } 
                  }
                  this.setState({jinji_tab1,jinji_tab2,settab:true})
                  



                }
                
              }
             
            )
            request({
              url:`koujing/jinji/content/0101`
            }).then(res=>{
              console.log(res)
              this.setState({
                jinji_ct1: res.data
              })


            })
            
            request({
              url:`koujing/jinji/content/0201`
            }).then(res=>{
              console.log(res)
              this.setState({
                jinji_ct2: res.data
              })
            })
                    
                  
            
           
            
            break;
          
          default:
            const c_type = value[1]
            console.log(c_type);
            const c_name = cat_data[0].children[c_type-1].label
            axios.all([
              request({
                url:`koujing/yuqing/intro/${c_type}`
              }),
              request({
                url:`koujing/yuqing/content/${c_type}`
              })
            ]).then(res => {
              var res_intro,res_yucontent
              [res_intro,res_yucontent ] =res
              this.setState({
                res_intro:res_intro.data,
                res_yucontent:res_yucontent.data,
                show:false,
                current:c_type,
                current_name:c_name
              })     
            })
             

            break;
        }
       
    
    }
    handleClick = (e) => {
        const {yuqing,jinji} = this.state
        e.preventDefault(); // Fix event propagation on Android
        this.setState({
        show: !this.state.show,
        });

        if (!this.state.initData) {
          for (var yitem of yuqing){
            const c_item = {
                label : yitem.name,
                value : yitem.type,
            }
            cat_data[0].children.push(c_item)
          }
  
          for (var jitem of jinji){
            const c_item = {
                label : jitem.name,
                value : jitem.type,
            }
            cat_data[1].children.push(c_item)
          }
          this.setState({initData: cat_data});
               
              }
            }
              
    onMaskClick = () => {
        this.setState({
        show: false,
        });
    }

    renderContent1 = (tab,jinji_ct1) =>
    {
      return(
    <div >
      <div className="jinji-title"> {tab.content}</div>
      <div className="jinji-content">
      {jinji_ct1 ? jinji_ct1.map(item=>{
        return (<div className="jinji-content-item" key={item.id}>
          <span className="jj-title">{item.title}</span>
          <div className="jj-content" dangerouslySetInnerHTML={{__html:item.content}}></div>
          
        </div>)
      }):null}
      </div>
      
    </div>
    )}

    renderContent2 = (tab,jinji_ct2) =>
    {
      return(
    <div >
      <div className="jinji-title"> {tab.content}</div>
      <div className="jinji-content">
      {jinji_ct2 ? jinji_ct2.map(item=>{
        return (<div className="jinji-content-item" key={item.id}>
          <span className="jj-title">{item.title}</span>
          <div className="jj-content" dangerouslySetInnerHTML={{__html:item.content}}></div>
          
        </div>)
      }):null}
      </div>
      
    </div>
    )}

    

    changetabs1 = tab =>{
      
      request({
        url:`koujing/jinji/content/${tab.type}`
      }).then(res=>{
       
        this.setState({
          jinji_ct1: res.data
        })
      })
    }

    changetabs2 = tab =>{
      
      request({
        url:`koujing/jinji/content/${tab.type}`
      }).then(res=>{
       
        this.setState({
          jinji_ct2: res.data
        })
      })
    }
              
    render() {
        
        const { isloading,initData, show  ,current ,res_yucontent,res_intro,current_name,current_type,current_sub,jinji_tab1,jinji_tab2,jinji_ct1,jinji_ct2} = this.state;
        const menuEl = (
        <Menu
            className="foo-menu"
            data={initData}
            value={['1', '3']}
            onChange={this.onChange}
            height={document.documentElement.clientHeight * 0.6}
        />
        );
        const loadingEl = (
        <div style={{ width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}>
            <ActivityIndicator size="large" />
        </div>
        );

        return (
        <div className={show ? 'menu-active' : ''}>
            <div>
            <NavBar
                
                mode="dark"
                icon={<img src="https://gw.alipayobjects.com/zos/rmsportal/iXVHARNNlmdCGnwWxQPH.svg" className="am-icon am-icon-md" alt="" />}
                onLeftClick={this.handleClick}
                className="top-nav-bar"
            >
                口径库
            </NavBar>
            </div>
            {show ? initData ? menuEl : loadingEl : null}
            {show ? <div className="menu-mask" onClick={this.onMaskClick} /> : null}
            <Spin spinning={isloading}>
              <div className="pamphlet">
              {current_type === 'jinji' ? 
              <div className='jinji_sub'>
                {current_sub === '01' ? 
                <div className='jinji_sub_1'>
                  <div className='jinji_sub_title'>风险因素分类</div>
                  <WhiteSpace />
                    <Tabs tabs={jinji_tab1} onChange={this.changetabs1} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
                      {(tab)=>this.renderContent1(tab,jinji_ct1)}
                     
                    </Tabs>
                  <WhiteSpace />
                </div> 
                :
                <div className='jinji_sub_1'>
                  <div>文化/宗教因素分类</div>
                  <WhiteSpace />
                    <Tabs tabs={jinji_tab2} onChange={this.changetabs2} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={2} />}>
                      {(tab)=>this.renderContent1(tab,jinji_ct2)}
                    </Tabs>
                  <WhiteSpace />
                  
                </div>}
              </div> 
              :
              <div className="yuqing">
                <div className="yuqing-title">
                  <span>第{getChinesenum(current)}类舆情风险点</span>
                  <span>{current_name}</span>
                </div>
               
                <div className="yuqing-content-ct">
                  <div className="yuqing-content-ct-koujingyaodian">一、基本口径要点</div>
                {res_intro.map(item=>{
                  return (
                    <div className="yuqing-content-ct-item" key={item.id} >
                      <div className="yuqing-content-ct-item-title">
                        {item.type}.{item.idx}{item.title}
                        </div>
                      <div className="yuqing-content-ct-info" dangerouslySetInnerHTML={{__html:item.content}}></div>


                    </div>)
                })}
                </div>
                <div className="yuqing-content-qa">
                <div className="yuqing-content-ct-koujingyaodian">二、模拟问题及应对口径<br></br></div>
                {
                  res_yucontent.map(item=>{
                    return (
                      
                      <div className="yuqing-content-qa-item" key={item.id}>
                        <Divider dashed></Divider>
                        
                        <div className="yuqing-content-qa-item-q" dangerouslySetInnerHTML={{__html:item.question}}>

                        </div>
                        <div className="yuqing-content-qa-item-a" dangerouslySetInnerHTML={{__html:item.answer}}>

                        </div>
                      </div>
                    )
                  })
                }
                </div>
               
              </div>
                }
                </div>
            </Spin>
        </div>
        );
        }
    }
        
             
             
const mapState2Props = (state) => 
({
    username : state.getIn(['login','usr']),
    identity : state.getIn(['login','identity']),
    
})       
        

        
        
export default connect(mapState2Props,)(Pamphlet);